<!-- 规则组件 -->
<template>
  <a-modal
    :visible='visible'
    title="车辆定位"
    width="100%"
    :footer="null"
    :mask-closable='false'
    :destroy-on-close='true'
    :style="{ top: '0px' }"
    @update:visible='updateVisible'
  >
    <a-input v-model:value="bdPoint.lng" style="width: 180px;" />
    <a-input v-model:value="bdPoint.lat" style="width: 180px;" />
    <a-input v-model:value="zoom" style="width: 100px;" />
    <a-button style="margin-left: 25px;" type='primary' html-type='button' @click='selectFinish'>确认</a-button>
    <baidu-map
      ak="OsoBFa0ZqPGS0UpqiiF0rVHsBp0kfQ5F"
      class="map"
      :scroll-wheel-zoom="true"
      style="height: 100vh;margin-top : 5px;"
      :center="bdPoint"
      :zoom="zoom"
      @moving="syncCenterAndZoom"
      @moveend="syncCenterAndZoom"
      @zoomend="syncCenterAndZoom"
    >
    </baidu-map>
  </a-modal>
</template>

<script>
import { BaiduMap  } from 'vue-baidu-map-3x'
import { nextTick } from 'vue';

export default {
  name: 'VehicleManagerGeofenceListCircleManagerBmap',
  emits: ['update:visible', 'done'],
  components: {
    BaiduMap
  },
  props: {
    // 弹窗是否打开
    visible: Boolean,
    point : Object
  },
  created() {
    console.log(this.point)
    if (this.point == null || !this.point.longitude || !this.point.latitude) {
      this.bdPoint = {
        lng: 116.404,
        lat: 39.915
      };
    } else {
      this.bdPoint = {
        lng: this.point.longitude,
        lat: this.point.latitude
      };
    }
  },
  data() {
    return {
      bdPoint : {
        lng: 116.404,
        lat: 39.915
      },
      zoom : 16
    };
  },
  methods: {
    selectFinish() {
      let that = this;
      let point = {
        longitude: this.bdPoint.lng,
        latitude: this.bdPoint.lat
      };
      that.$emit('done', point);
      // 关闭弹框，通过控制visible的值，传递给父组件
      this.updateVisible(false);
    },
    syncCenterAndZoom(e) {
      let that = this;
      const { lng, lat } = e.target.getCenter();
      that.zoom = e.target.getZoom();
      nextTick(() => {
        that.bdPoint.lng = lng;
        that.bdPoint.lat = lat;
      })
    },
    /**
     * 更新编辑界面的弹框是否显示
     *
     * @param value true-显示，false-隐藏
     * @author cancan
     * @date 2022/03/05 14:43
     */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
};
</script>

<style lang="less" scoped>
.card-title {
  border-left: 5px solid;
  border-color: var(--primary-color);
  padding-left: 10px;
}

.card-title-background {
  background-color: #f5f5f5;
  height: 2em;
  line-height: 2em;
  margin-bottom: 2em;
}
</style>
